<!--
 * @Author: wangshuixin 2412658453@qq.com
 * @Date: 2024-09-11 14:54:44
 * @LastEditors: wangshuixin 2412658453@qq.com
 * @LastEditTime: 2024-09-23 13:29:24
 * @FilePath: \web-components-box\components\equation\EquationTermEdit.vue
 * @Description: 方程的项 - 编辑
-->

<script setup lang="ts">
const props = defineProps({
  minWidth: {
    type: Number, // 单位px
    default: 60
  },
})

/*
  variable: TermElements  // 变量 {text: 'x',sup: 1,sub: 1,}
  constant: TermElements  // 数字常量 {number: 3,sup: 2,},
  constant2: TermElements  // 字母常量 {text: 'm',sub: 0,},
  3mx
  (3 + 3m - n)(xy + xz)
*/

</script>

<template>
  <div class="term">
    <div class="term-constant" :style="{ '--minWidth': `${props.minWidth}px` }">
      <!-- <a-input-number placeholder="系数" :style="{ width: '120px' }" :min="0" :max="255" :precision="0" allow-clear hide-button model-event="input" /> -->
    </div>
    <div class="term-constant2" :style="{ '--minWidth': `${props.minWidth}px` }">
      2234
    </div>
    <div class="term-variable" :style="{ '--minWidth': `${props.minWidth}px` }">
      x<span style="font-size: 1.2rem;"><sub>n</sub><sup>m</sup></span>
    </div>
  </div>
</template>

<style scoped lang="less">
.term {
  @apply flex flex-row bg-green-400;
  &-constant {
    @apply flex flex-1;
    min-width: var(--minWidth);
    background-color: red;
  }
  &-constant2 {
    @apply flex flex-1;
    min-width: var(--minWidth);
    background-color: blue;
  }
  &-variable {
    @apply flex flex-1;
    min-width: var(--minWidth);
    font-family: Gabriola;
    font-size: 2rem;
    background-color: orange;
  }
}
</style>